<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const isCollapse = ref(false)

function onExpand() {
  isCollapse.value = false
}

function onFold() {
  isCollapse.value = true
}
</script>

<template>
  <el-menu
    active-text-color="#ffd04b"
    background-color="#545c64"
    :default-active="router.currentRoute.value.fullPath"
    text-color="#fff"
    class="menu"
    :router="true"
    :collapse="isCollapse"
  >
    <el-menu-item v-if="isCollapse" @click="onExpand()">
      <el-icon>
        <Expand />
      </el-icon>
    </el-menu-item>
    <el-menu-item v-else @click="onFold()">
      <el-icon>
        <Fold />
      </el-icon>
    </el-menu-item>
    <el-menu-item index="/home/equipment">
      <el-icon>
        <search />
      </el-icon>
      <span>设备查询</span>
    </el-menu-item>
    <el-menu-item index="/home/addequipment">
      <el-icon>
        <DocumentAdd />
      </el-icon>
      <span>设备添加</span>
    </el-menu-item>
  </el-menu>
</template>

<style scoped>
.box {
  height: 100%;
}

.menu {
  height: 100%;
}

.el-menu-item {
  padding-right: 5vw;
}
</style>
